<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">收货人</text>
			<input class="input" type="text" v-model="addressList.name" placeholder="姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">收货手机</text>
			<input class="input" type="number" v-model="addressList.mobile" placeholder="手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" style="position: relative;" @click="hide_show1">
			<text class="tit">省份</text>
			<!-- 省份列表 -->
			<view :style="{display: show_hide1}" style="position: absolute;top: 20upx;left: 210upx;border: 1px solid #CCCCCC;width: 250upx;height: 360upx;overflow: scroll;z-index: 99;background-color: #FFFFFF;">
				<view v-for="(item,i) in all_list" :key="i" @click.stop="hide1(item.id,item.name)">{{item.name}}</view>
			</view>
			<input class="input" type="text" disabled="true" v-model="addressList.province_name" placeholder="省份" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" style="position: relative;" @click="hide_show2">
			<text class="tit">城市</text>
			<!-- 市列表 -->
			<view :style="{display: show_hide2}" style="position: absolute;top: 20upx;left: 210upx;border: 1px solid #CCCCCC;width: 250upx;height: 360upx;overflow: scroll;z-index: 99;background-color: #FFFFFF;">
				<view v-for="(item,i) in all_list" :key="i" @click.stop="hide2(item.id,item.name)">{{item.name}}</view>
			</view>
			<input class="input" type="text" v-model="addressList.city_name" placeholder="城市" placeholder-class="placeholder" />
		</view>
		<!-- 地区列表 -->
		<view class="row b-b" style="position: relative;" @click="hide_show3">
			<text class="tit">地区</text>
			<view :style="{display: show_hide3}" style="position: absolute;top: 20upx;left: 210upx;border: 1px solid #CCCCCC;width: 250upx;height: 360upx;overflow: scroll;z-index: 99;background-color: #FFFFFF;">
				<view v-for="(item,i) in all_list" :key="i" @click.stop="hide3(item.id,item.name)">{{item.name}}</view>
			</view>
			<input class="input" type="text" v-model="addressList.district_name" placeholder="地区" placeholder-class="placeholder" />
		</view>
		
		<view class="row b-b"> 
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addressList.address" placeholder="街道,小区,门牌号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">邮编<text style="color: #ccc;">(选填)</text></text>
			<input class="input" type="text" v-model="addressList.youbian" placeholder="请输入邮编" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressList.defaule" color="#000" @change="switchChange" />
		</view>
		<button v-if="!show" class="add-btn" @click="confirm">更新用户地址</button>
		<button v-if="show" class="add-btn" @click="submit">添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:'',
				res:[],
				show:false,
				addressid: '',
				addressList:{},
				default: false,
				parent_id: 1, // 地址父级id
				baseid: 1, // 暂存区id,二次点击市级时调用
				all_list: [], // 省级地区列表
				show_hide1: 'none',
				show_hide2: 'none',
				show_hide3: 'none',
			}
		},
		onLoad(e){
			this.addressid = e.id;
			this.addressList.default = 2 // 初始化默认地址为2非默认
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
				 this.user_id = res.data
				},
			});
			if(e.id != 'undefined' && e.id != undefined){
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				});
				this.setajax_after()
			}else{
				this.show = true
			}
		},
		methods: {
			setAjax () {
				// 获取省
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/District/index',
					method: 'POST',
					data: {
						parent_id: this.parent_id,
					},
					header:{'Content-Type': 'application/x-www-form-urlencoded'},
					success: res => {
						this.all_list = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setajax_after(){
				// 编辑页面才需要setajax
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Address/index?p=1',
					method: 'POST',
					data: {
						user_id: this.user_id,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.addressList = res.data.data.list
						let arr = this.addressList.filter(function(item){
							return(item.id == o.addressid)
						})
						this.addressList = arr[0]
					},
					fail: () => {},
					complete: () => {}
				});
			},
			switchChange(e){
				console.log(e.detail.value)
				// 1为设为默认
				if ( e.detail.value == true ) {
					this.addressList.default = '1';
					return
				}
				else {
					this.addressList.default = '2';
				}
			},
			// 提交新建信息
			submit(){
				if(this.addressList.name == undefined || this.addressList.name == ''){
					uni.showToast({
						title: '请填写收货人姓名',
					})
					return;
				}
				if(this.addressList.mobile == undefined || this.addressList.mobile == ''){
					uni.showToast({
						title: '请填写收货人号码',
					})
					return;
				}
				if(this.addressList.province_id == undefined || this.addressList.province_id == ''){
					uni.showToast({
						title: '请填写省份',
					})
					return;
				}
				if(this.addressList.city_id == undefined || this.addressList.city_id == ''){
					uni.showToast({
						title: '请填写市级信息',
					})
					return;
				}
				if(this.addressList.district_id == undefined || this.addressList.district_id == ''){
					uni.showToast({
						title: '请填写县级地区',
					})
					return;
				}
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Address/addAddress',
					method: 'POST',
					data: {
						user_id: this.user_id,
						// id: this.addressid,
						name: this.addressList.name,
						province_id: this.addressList.province_id,
						city_id: this.addressList.city_id,
						district_id: this.addressList.district_id,
						address: this.addressList.address,
						mobile: this.addressList.mobile,
						is_default: this.addressList.default
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						if(res.data.code == 200) {
							setTimeout(function() {
								uni.reLaunch({
									url: './address'
								})
							}, 1500);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			
			// 修改编辑
			confirm(){
				if(this.addressList.name == undefined || this.addressList.name == ''){
					uni.showToast({
						title: '请填写收货人姓名',
					})
					return;
				}
				if(this.addressList.mobile == undefined || this.addressList.mobile == ''){
					uni.showToast({
						title: '请填写收货人号码',
					})
					return;
				}
				if(this.addressList.province_name == undefined || this.addressList.province_name == ''){
					uni.showToast({
						title: '请填写省份',
					})
					return;
				}
				if(this.addressList.city_name == undefined || this.addressList.city_name == ''){
					uni.showToast({
						title: '请填写市级信息',
					})
					return;
				}
				if(this.addressList.district_name == undefined || this.addressList.district_name == ''){
					uni.showToast({
						title: '请填写县级地区',
					})
					return;
				}
				if(this.addressList.district_name == undefined || this.addressList.district_name == ''){
					uni.showToast({
						title: '请填写县级地区',
					})
					return;
				}
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Address/updateAddress',
					method: 'POST',
					data: {
						user_id: this.user_id,
						id: this.addressid,
						name: this.addressList.name,
						province_id: this.addressList.province_id,
						city_id: this.addressList.city_id,
						district_id: this.addressList.district_id,
						address: this.addressList.address,
						mobile: this.addressList.mobile,
						is_default: this.addressList.default
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.showToast({
							title: res.data.msg
						});
						if(res.data.code == 200) {
							setTimeout(function() {
								uni.reLaunch({
									url: './address'
								})
							}, 1500);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 省份选择
			hide_show1() {
				this.parent_id = 1 
				this.addressList.city_name = ""
				this.addressList.city_id = 0 
				this.addressList.district_name = ""
				this.addressList.district_id = 0 // 多次选择删除之前的数据
				this.show_hide1 = 'block'
				this.setAjax()
			},
			hide1(id,name) {
				this.show_hide1 = 'none'
				this.addressList.province_name = name
				this.addressList.province_id = id
				this.parent_id = id
				this.baseid = this.parent_id
			},
			// 市级id,
			hide_show2() {
				this.parent_id = this.baseid
				this.show_hide2 = 'block'
				this.show_hide1 = 'none' // 排他显示
				this.setAjax()
			},
			hide2(id,name) {
				this.show_hide2 = 'none'
				this.addressList.city_name = name // 市名称
				this.addressList.city_id = id // 市id
				this.parent_id = id // 父级id
			},
			hide_show3() {
				this.show_hide3 = 'block'
				this.show_hide1 = 'none'
				this.show_hide2 = 'none'
				this.setAjax()
			},
			hide3(id,name) {
				this.show_hide3 = 'none'
				this.addressList.district_name = name
				this.addressList.district_id = id
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 200upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: #000;
		border-radius: 10upx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
